import { Component } from 'react';
import { observer } from 'mobx-react';
import { authStore } from '@/stores';
import { View, Text /* , Navigator */ } from '@tarojs/components';
import { AtButton } from 'taro-ui';
import Taro from '@tarojs/taro';
import styles from './index.module.scss';

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Du',
    };
  }

  componentDidMount() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  onButtonClick() {
    const content = [...arguments].find((item) => typeof item === 'string');
    Taro.showModal({
      content: content || '您点击了按钮！！',
      showCancel: false,
    });
  }

  render() {
    const { oauth } = authStore;

    return (
      <View className={`${styles.index} green`}>
        <Text className={styles.appHeader}>Hello world!</Text>
        <Text className={styles['app-header']}>Hello world!</Text>
        <Text className={styles.btn}>Hello {this.state.name}!</Text>
        <Text className={styles.btnLarge}>Hello btn!</Text>
        <View className={styles.state}>
          <Text className={styles.btnLarge}>
            mobx状态 oauth.mobile: {oauth.mobile || '暂无'}
          </Text>
        </View>
        <View className={styles.state}>
          <Text className={styles.btnLarge}>
            mobx状态 authStore.finishLogin: {authStore.finishLogin}
          </Text>
        </View>

        <AtButton
          type="primary"
          className="btn"
          onClick={this.onButtonClick.bind(this, 'Hello Taro!!!')}
        >
          主操作按钮 btn
        </AtButton>
        {/* <Navigator url="/pages/login/login">GO login</Navigator>
        <Navigator url="/pages/inviteRecord/inviteRecord">
          GO inviteRecord
        </Navigator>
        <Navigator url="/pages/personal/personal">
          GO personal/personal
        </Navigator>*/}
      </View>
    );
  }
}

export default observer(Index);
